<template>
	<view :style="{'height':outheight,'overflow':outoverflow}">
		<view class="text-darkGray">
			<cu-custom :isBack="true" :isFull="true" bgColor="bg-white solids-bottom" isPointer="all">
				<block slot="content">
					<view class="uni-flex uni-row input-view" style="justify-content: center;">
						<view :class="['text-btn',current[0]]" @tap="onClickItem(0)">
							新房
						</view>
						<view :class="['text-btn',current[1]]" @tap="onClickItem(1)">
							二手房
						</view>
					</view>
				</block>
				<block slot="right">
					<navigator url="../../search/search">
						<text class="cuIcon-search" style="font-size: 40upx;line-height: 60upx;"></text>
					</navigator>
				</block>
			</cu-custom>
		</view>
		<view class="uni-navbar uni-navbar-fixed uni-navbar-shadow" style="background-color:#FFFFFF">
			<view class="uni-flex uni-row">
				<picker @change="bindPickerChange1" :value="index1" range-key="AreaName" :range="array"
				 class="flex-item" style="flex: 1;text-align: center;" v-if="current[0]=='on'">
					<view style="line-height: 100upx;">{{arealabel1.name}}<uni-icon type="arrowdown" size="16"></uni-icon></view>
				</picker>
				<picker @change="bindPickerChange2" :value="index2" range-key="AreaName" :range="array"
				 class="flex-item" style="flex: 1;text-align: center;" v-if="current[1]=='on'">
					<view style="line-height: 100upx;">{{arealabel2.name}}<uni-icon type="arrowdown" size="16"></uni-icon></view>
				</picker>
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[1]}" @tap="TaggarSelect(1)">
					均价<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[2]}" @tap="TaggarSelect(2)">
					楼龄<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[3]}" @tap="TaggarSelect(3)">
					排序<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
			</view>
		</view>
		<view class="select-box" :class="{'on':Select[0]}" :style="[{top:top + 'px'}]"></view>
		<view class="select-box" :class="{'on':Select[1]}" :style="[{top:top + 'px'}]">
			<ul class="select-ul" :style="{'max-height':(windowHeight*0.6)+'px'}">
				<li v-for="(value,index) in Price" :key="index" @tap="TaggarSelectUl(index-1,'Price')" :class="{'on':index-1 == tabIndex.Price}">{{value}}</li>
			</ul>
			<view class="uni-flex uni-row select-input">
				<view class="uni-input-div">
					<input class="uni-input" type="number" placeholder="最低价" />
				</view>
				<view class="zhi">-</view>
				<view class="uni-input-div">
					<input class="uni-input" type="number" placeholder="最高价" />
				</view>
				<view class="zhi" style="margin-right: 50upx;">万</view>
				<view style="flex: 1;" class="select-btn on">确定</view>
			</view>
		</view>
		<view class="select-box" :class="{'on':Select[2]}" :style="[{top:top + 'px'}]">
			<ul class="select-ul" :style="{'max-height':(windowHeight*0.6)+'px'}">
				<li @tap="TaggarSelectUl(-1,'Age')" :class="{'on':-1 == tabIndex.Age}">不限</li>
				<li v-for="(item,index) in labelList6" :key="item.Key" @tap="TaggarSelectUl(index,'Age')" :class="{'on':index == tabIndex.Age}">{{item.DisplayValue}}</li>
			</ul>
			<view class="uni-flex">
				<view style="flex: 1;" class="select-btn on">确定</view>
			</view>
		</view>
		<view class="select-box" :class="{'on':Select[3]}" :style="[{top:top + 'px'}]">
			<ul class="select-ul" :style="{'max-height':(windowHeight*0.6)+'px'}">
				<li @tap="TaggarSelectUl(-1,'Sort')" :class="{'on':-1 == tabIndex.Sort}">不限</li>
				<li v-for="(item,index) in labelList5" :key="item.Key" @tap="TaggarSelectUl(index,'Sort')" :class="{'on':index == tabIndex.Sort}">{{item.DisplayValue}}</li>
			</ul>
			<view class="uni-flex">
				<view style="flex: 1;" class="select-btn on">确定</view>
			</view>
		</view>
		<view style="padding-top: 50px;" v-if="current[0]=='on'">
			<view class="model-main model">
				<view class="warp30"></view>
				<view class="text-center padding-xs text-grey text-sl center" v-if="listData1.length==0">
					暂无数据
				</view>
				<navigator :url="'../newhouse/detail/detail?detailDate='+encodeURIComponent(JSON.stringify(item))" class="uni-flex uni-row model-item" v-for="(item,key) in listData1" :key="key">
					<image class="model-item-img" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"/>
					<view class="model-item-text" style="flex: 1;">
						<view class="model-item-title one">
							{{item.Title}}
						</view>
						<view class="model-item-main">
							<text class="model-item-title2">{{item.Line1Display||item.Line1Display==""?item.Line1Display:"-"}}</text>
							<text class="model-item-title2 adr">{{item.Line2Display||item.Line2Display==""?item.Line2Display:"-"}}</text>
							<text class="model-item-title2 adr">{{item.Line3Display||item.Line3Display==""?item.Line3Display:"-"}}</text>
							<view class="model-item-title2 main2">
								<text class="model-item-main-price"><text>均价</text>{{item.AvgPrice}}<text>元/平米</text></text>
							</view>
							<text class="model-item-title2">{{item.Line4Display}}</text>
						</view>
					</view>
				</navigator>
				<uni-load-more :loadingType="loadingType1" :contentText="contentText" v-if="listData1.length!=0"></uni-load-more>
			</view>
		</view>
		<view style="padding-top: 50px;" v-if="current[1]=='on'">
			<view class="model-main model">
				<view class="warp30"></view>
				<view class="text-center padding-xs text-grey text-sl center" v-if="listData2.length==0">
					暂无数据
				</view>
				<navigator :url="'../sell/detail/detail?detailDate='+encodeURIComponent(JSON.stringify(item))" class="uni-flex uni-row model-item" v-for="(item,key) in listData2" :key="key">
					<image class="model-item-img" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"/>
					<view class="model-item-text" style="flex: 1;">
						<view class="model-item-title">
							{{item.Title}}
						</view>
						<view class="model-item-main">
							<text class="model-item-title2">{{item.Line2Display||item.Line2Display==""?item.Line2Display+"建成":"-"}}</text>
							<text class="model-item-title2 adr">{{item.Line3Display||item.Line3Display==""?item.Line3Display:"-"}}</text>
							<view class="model-item-title2 main2">
								<text class="model-item-main-price"><text>均价</text>{{item.AvgPrice}}<text>元</text></text>
							</view>
							<text class="model-item-title2">{{item.Line4Display}}</text>
						</view>
					</view>
				</navigator>
				<uni-load-more :loadingType="loadingType2" :contentText="contentText" v-if="listData2.length!=0"></uni-load-more>
			</view>
		</view>
		<view class="window-bg" :class="{'on':(Select[0]||Select[1]||Select[2]||Select[3])}" @tap="RemoveBG"
		 @touchmove.stop.prevent="moveHandle"></view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	import uniLoadMore from '../../../components/uni-load-more.vue'
	export default {
		components: {
			uniIcon,
			uniLoadMore
		},
		data() {
			return {
				array: [],
				index1:0,
				index2:0,
				current:["on",""],
				top: 0,
				listData1: [],
				listData2: [],
				reload: false,
				Select: [false,false,false,false],
				loadingType1: 0,
				loadingType2: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				tabIndex: {Price: -1,Age:-1,Sort:-1},
				page1: 1,
				page2: 1,
				outheight: "auto",
				outoverflow: "auto",
				windowHeight: "",
				labelDataList: '',
				priceS:"",
				priceE:"",
				floorAreaS:"",
				floorAreaE:"",
				arealabel1:{name:null,key:null},
				arealabel2:{name:null,key:null},
				city:{name:null,key:null},
				InputBottom: 0,
				Price: ["不限", "80万以下", "80-100万", "100-120万", "120-150万"],
				labelList5:this.TypeAllList['"房源列表排序"'],
				labelList6:this.TypeAllList['"楼龄"'],
			};
		},
		onLoad(event) {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight;
				}
			});
			this.top = this.CustomBar + 50;
			let _this = this;
			let nullitem = {value:null,label:"不限"};
			uni.getStorage({
				key: 'city_key',
				success(res1) {
					console.info(res1.data);
					that.city = res1.data;
					that.arealabel1 = res1.data;
					that.arealabel2 = res1.data;
					that.getList1();
					that.getList2();
					uni.request({
						url: _this.AjaxUrl + '/WebApi/GetArea',
						data:{id:that.city.key},
						success(res) {
							//console.info(res.data);
							that.array = JSON.parse(res.data.Extend);
							console.info(JSON.parse(res.data.Extend));
						}
					});
				},error(){
					console.info("none");
				}
			});
		},
		onPullDownRefresh() {
			this.reload = true;
			if(this.current[0] == "on"){
				this.getList1();
			}else{
				this.getList2();
			}
		},
		onReachBottom() {
			if(this.current[0] == "on"){
				if (this.loadingType1 !== 0) {
					return;
				}
				this.loadingType1 = 1;
				this.getList1();
			}else{
				if (this.loadingType2 !== 0) {
					return;
				}
				this.loadingType2 = 1;
				this.getList2();
			}
		},
		methods: {
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.index1 = e.target.value;
				console.info(this.array[this.index1]);
				this.arealabel1 = {name:this.array[this.index1].AreaName,key:this.array[this.index1].AreaId};
				this.RegetList1();
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.index2 = e.target.value
				console.info(this.array[this.index2]);
				this.arealabel2 = {name:this.array[this.index2].AreaName,key:this.array[this.index2].AreaId};
				this.RegetList2();
			},
			onClickItem(index) {
				if (this.current[index] !== "on") {
					this.current = ["", ""];
					this.current[index] = "on"
				}
			},
			getList1() {
				console.info(this.page1);
				let data = {
					PageIndex: this.page1,
					PageSize: 10,
					/* CityId:this.city.key,
					SecondAreaId:this.arealabel2.key */
				};
				uni.request({
					url: this.AjaxUrl + '/WebApi/GetX3NewHouseEstateList',
					data: data,
					success: (res) => {
						uni.stopPullDownRefresh();
						if (res.statusCode == 200) {
							let list = JSON.parse(res.data.Extend).List;
							let PageCount = JSON.parse(res.data.Extend).PageCount;
							if (this.page1 > PageCount) {
								this.loadingType1 = 2;
								return;
							}
							this.listData1 = this.reload ? list : this.listData1.concat(list);
							this.reload = false;
							this.page1++;
							this.loadingType1 = 0;
						}
					},
					fail: (e) => {
						console.info(e);
					}
				})
			},
			getList2() {
				console.info(this.page2);
				let data = {
					PageIndex: this.page2,
					PageSize: 10,
					/* CityId:this.city.key,
					SecondAreaId:this.arealabel2.key */
				};
				uni.request({
					url: this.AjaxUrl + '/WebApi/GetX3EstateList',
					data: data,
					success: (res) => {
						uni.stopPullDownRefresh();
						if (res.statusCode == 200) {
							console.info(JSON.parse(res.data.Extend));
							let list = JSON.parse(res.data.Extend).List;
							let PageCount = JSON.parse(res.data.Extend).PageCount;
							if (this.page2 > PageCount) {
								this.loadingType2 = 2;
								return;
							}
							this.listData2 = this.reload ? list : this.listData2.concat(list);
							this.reload = false;
							this.page2++;
							this.loadingType2 = 0;
						}
					},
					fail: (e) => {
						console.info(e);
					}
				})
			},
			TaggarSelect(item) {
				if (this.Select[item]) {
					this.Select = [false,false,false,false];
					this.outheight = "auto";
					this.outoverflow = "auto";
				} else {
					this.Select = [false,false,false,false];
					this.Select[item] = !this.Select[item];
					this.outheight = this.windowHeight + "px";
					this.outoverflow = "hidden";
				}
			},
			TaggarSelectUl: function(index, type) {
				this.tabIndex[type] = index;
			},
			RemoveBG: function() {
				this.Select = [false,false,false,false];
				this.outheight = "auto";
				this.outoverflow = "auto";
			},
			moveHandle: function() {
				console.info("滑不了了");
			},
			RegetList1(){
				this.listData1 = [];
				this.page1 = 1;
				this.getList1();
				this.RemoveBG();
			},
			RegetList2(){
				this.listData2 = [];
				this.page2 = 1;
				this.getList2();
				this.RemoveBG();
			},
		}
	}
</script>

<style lang="less">
	.uni-row .text-btn {
		padding: 0 20upx;
		border: 2upx solid #ff5c5c;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #ff5c5c;
		font-size: 28upx;
		box-sizing: border-box;
		min-width: 35%;
	}
	.uni-row .text-btn.on {
		background: #ff5c5c;
		color: #fff;
	}
	.uni-row .text-btn:first-child {
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
	}
	.uni-row .text-btn:last-child {
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
	}

	.checkbox {
		padding: 5px 10px;
		border: 1px solid #EB5248;
		margin: 10px;
		border-radius: 7upx;
		color: #000;
	}

	.select-box {
		width: 100%;
		padding: 30upx 0 0;
		background: #fff;
		text-align: center;
		position: fixed;
		top: 130px;
		z-index: 0;
		opacity: 0;
	}

	.select-box.on {
		z-index: 11;
		opacity: 1;
	}

	.select-box .uni-input-div {
		flex: 1;
		padding: 10px;
	}

	.select-box .zhi {
		line-height: 96upx;
	}

	.select-box .uni-input-div .uni-input {
		background: #f2f2f2;
		padding: 0;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		border-radius: 50upx;
	}

	.select-input {
		border-top: 2upx solid #ddd;
	}

	.select-btn {
		padding: 10upx 0;
		font-size: 28upx;    
		border-radius: 50px;
		margin: 10px;
		border: 2upx #ff4a4a solid;
		color: #ff4a4a;
	}

	.select-btn.on {
		color: #fff;
		background: #ff4a4a;
	}

	.select-ul {
		padding: 0 20upx;
		margin-bottom: 10upx;
		overflow: auto;
	}

	.select-ul li {
		display: block;
		padding: 24upx 20upx;
		border-bottom: 2upx solid #fff;
		text-align: left;
		font-size: 28upx;
	}

	.select-ul li.on {
		color: #e7736d;
		border-bottom-color: #e7736d;
		position: relative;
	}

	.select-ul li.on:after {
		content: "\e62c";
		font-family: "iconfont";
		color: #e7736d;
		position: absolute;
		right: 50upx;
	}

	.select-item {
		font-size: 24upx;
		text-align: left;
		margin-bottom: 20upx;

		.select-item-title {
			margin-bottom: 10upx;
			line-height: 2;
			color: #666666;
			font-size: 28upx;
			display: block;
		}

		.select-item-list {
			padding: 0;

			.select-item-list-item {
				width: 25%;
				text-align: center;
				float: left;
				padding: 0;

				.select-item-list-item-btn {
					margin: 0 5% 10upx;
					border: 2upx solid #f6f6f6;
					background: #f6f6f6;
					color: #666666;
					box-sizing: border-box;
					border-radius: 6upx;
					width: 90%;
					text-align: center;
					font-size: 24upx;
					line-height: 2.5;
					display: block;
					padding: 0;

					&.on {
						background: #fff;
						border-color: #ff5f15;
						color: #ff5f15;
					}
				}

				&.w50 {
					width: 50%;

					.select-item-list-item-btn {
						margin: 0 2.5% 10upx;
						width: 95%;
					}
				}
			}
		}
	}

	.uni-navbar view .flex-item {
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
	}

	.uni-navbar view .flex-item.on {
		color: #e7736d;
	}

	.uni-navbar view .flex-item .uni-icon {
		margin-left: 10upx;
	}

	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.window-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
		display: none;
		display: none;
	}

	.window-bg.on {
		display: block;
	}

	.uni-list-cell {
		display: block;
		padding: 10upx;
	}

	.uni-house-img {
		position: relative;
	}

	.uni-house-img p.time {
		position: absolute;
		top: 0;
		left: 0;
		padding: 5px;
		opacity: .65;
		background: #000000;
		color: #fff;
		font-size: 12px;
	}

	.uni-house-img p.iconfont {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10px;
		color: #fff;
		font-size: 26px;
		line-height: 1;
	}

	.uni-house-txt {
		padding: 0 10upx;
	}

	.uni-house-txt .first span {
		margin-right: 20upx;
	}

	.uni-house-txt .first span.b {
		font-size: 40upx;
	}

	.uni-house-txt .three {
		font-size: 24upx;
	}

	.uni-house-txt .three span.iconfont {
		color: #fa3949;
		margin-right: 10upx;
	}

	.input-view {
		width: 92%;
		display: flex;
		background-color: #fff;
		height: 60upx;
		border-radius: 10upx;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 0;
		line-height: 60upx;
	}

	.input-view .uni-icon {
		line-height: 60upx !important;
	}

	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}

	.uni-navbar {
		display: block;
		position: relative;
		width: 100%;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.uni-navbar view {
		line-height: 44px;
	}

	.uni-navbar .uni-navbar-container.uni-navbar-container-box {
		position: absolute;
	}

	.uni-navbar-shadow {
		-webkit-box-shadow: 0 1px 6px #ccc;
		box-shadow: 0 1px 6px #ccc;
	}

	.uni-navbar.uni-navbar-fixed {
		position: fixed;
		z-index: 998;
	}

	.uni-navbar-header {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		width: 100%;
		height: 44px;
		line-height: 44px;
		font-size: 16px;
	}

	.uni-navbar-header .uni-navbar-header-btns {
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 60px;
		padding: 0 6px;
	}

	.uni-navbar-header .uni-navbar-header-btns:last-child {
		width: 30px;
	}

	.uni-navbar-container-box {
		width: 100%;
		position: absolute;
		top: 50%;
		margin-top: -26upx;
	}

	.uni-navbar-container-title {
		font-size: 15px;
		text-align: center;
		padding-right: 30px;
	}

	.model-main>.uni-row.model-item{
		padding: 30upx;
		overflow: hidden;
		position: relative;
		&:after{
			content: "";
			display: block;
			height: 2upx;
			width: 100%;
			background: #CCCCCC;
			left: 30upx;
			bottom: 0;
			position: absolute;
		}
		&:last-child:after{
			display: none;
		}
		.cu-avatar-box{
			.cu-avatar-name{
				font-size: 32upx;
				color: #333333;
				line-height: 48upx;
			}
			.cu-avatar-num{
				font-size: 28upx;
				color: #999999;
				line-height: 48upx;
			}
			.cu-avatar-main{
				line-height: 1.5;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}
	}
	.model-item{
		.model-item-img{
			width: 260upx;height: 260upx;border-radius: 10upx;
		}
		.hasvideo{
			position: absolute;
			left: 30upx;
			top: 30upx;
			width: 260upx;
			height: 260upx;
			text-align: left;
			padding: 90upx;
			box-sizing: border-box;
			image{
				width: 80upx;
				height: 80upx;
			}
		}
		.model-item-text{
			padding-left: 20upx;
			position: relative;
			.model-item-title,
			.model-item-title2{
				font-size: 30upx;
				line-height: 1.5;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				color: #333333;
			}
			.model-item-title{
				font-weight: 600;
			    -webkit-line-clamp: 2;
				height: 96upx;
				&.one{
					-webkit-line-clamp: 1;
					height: 48upx;
				}
				.label-box{
					height: 32upx;
					margin-right: 10upx;
					display: inline-block;
					vertical-align: text-top;
					&.kind1{
						width:84upx;
					}
					&.kind2{
						width:34upx;
					}
					&.kind3{
						width:58upx;
					}
				}
			}
			.model-item-title2{
				font-size: 26upx;
				color: #666666;
				line-height: 42upx;
				&.adr{
					font-size: 24upx;
				}
				&.main{
					.model-item-main-price{
						font-size: 30upx;
						color: #E03236;
						text{
							font-size: 24upx;
							margin:0 10upx 0 6upx;
						}
					}
				}
				&.main2{
					background: #ff4a4a;
					padding: 0 6upx;
					width: 270upx;
					.model-item-main-price{
						font-size: 30upx;
						color: #ffffff;
						text{
							font-size: 24upx;
							margin:0 10upx 0 6upx;
						}
					}
				}
			}
			.model-item-main{
				position: absolute;
				bottom: 0;
			}
		}
	}
</style>
